<ion-header >
  <ion-toolbar color="topBar">
    <ion-buttons start>
      <div class="logo"></div>
    </ion-buttons>
    <ion-buttons end>
      <button ion-button menuToggle>
        <ion-icon name="menu" >
          <ion-nav #content swipeBackEnabled="false"><span class="classification">分类</span></ion-nav>
        </ion-icon>
        <!--<ion-icon name="menu" ><span class="classification"></span></ion-icon>-->
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-menu type="overlay" side="right" [content]="content">

  <page-home-menu></page-home-menu>


</ion-menu>


<ion-content>
  <ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content pullingIcon="arrow-dropdown"  pullingText="Pull to refresh"  refreshingSpinner="circles"  refreshingText="Refreshing...">
    </ion-refresher-content>
  </ion-refresher>

  <ion-slides pager>
    <ion-slide *ngFor="let indexBannerItem of indexBanner" (click)="toRoom(indexBannerItem.room)">
      <img [src]="indexBannerItem.pic_url">
    </ion-slide>
  </ion-slides>

  <!-- 最热 -->
  <div class="layout-rooms hot">
    <div class="title">
      <span class="hotIcon"></span>
      <!--  <img class="roomsImg" src="../../assets/images/hot.png"> -->
      <span class="text">最热</span>
      <span class="change" (click)="change()">换一换</span>
    </div>
    <ion-grid>
      <ion-row>
        <ion-col col-6 *ngFor="let hot of hotsList" (click)="toRoom(hot)">
    <span class="room-online">
      <!-- <img class="eye" src="../../assets/images/eye.png"> -->
      <span class="eye"></span>
      {{hot.online}}
    </span>
          <img [src]="hot.room_src">
          <span class="room-nickname">
     <span class="user"></span>
      {{hot.nickname}}
      </span>
          <div class="room-des">{{hot.room_name}}</div>
        </ion-col>
      </ion-row>
    </ion-grid>
  </div>

  <!-- 正在直播 -->
  <div class="layout-rooms live">
    <div class="title">
      <span class="liveIcon"></span>
      <!-- <img class="roomsImg" src="../../assets/images/live.png"> -->
      <span class="text">正在直播</span>
      <span class="live-online" (click)="toLiveList($event)">当前<span>{{liveCount | tenThousand}}</span>个直播</span>
    </div>
    <ion-grid>
      <ion-row>
        <ion-col col-6 *ngFor="let live of liveList" (click)="toRoom(live)">
    <span class="room-online">
     <span class="eye"></span>
      {{live.online}}
    </span>
          <img [src]="live.room_src">
          <span class="room-nickname">
       <span class="user"></span>
            <!--  <img class="user" src="../../assets/images/user.png"> -->
      {{live.nickname}}
      </span>
          <div class="room-des">{{live.room_name}}</div>
        </ion-col>
      </ion-row>
    </ion-grid>
  </div>

  <!-- 颜值 -->
  <div class="layout-rooms yz">
    <div class="title">
      <span class="yzIcon"></span>
      <!--  <img class="roomsImg" src="../../assets/images/yz.png"> -->
      <span class="text">颜值</span>
    </div>
    <ion-grid>
      <ion-row>
        <ion-col col-6 *ngFor="let yz of yzList" (click)="toRoom(yz)">
    <span class="room-online">
     <span class="eye"></span>
      {{yz.online}}
    </span>
          <img [src]="yz.room_src">
          <div class="room-des">
            <div class="yzname">
              <span class="user"></span>
              {{yz.nickname}}
            </div>
            <div class="yzaddress">
              <span class="address"></span>

              {{yz.anchorCity}}
            </div>
          </div>
        </ion-col>
      </ion-row>
    </ion-grid>
  </div>


  <div class="layout-rooms" *ngFor="let mix of mixList">
    <div class="title">
      <img class="roomsImg" [src]="mix.icon">
      <span class="text">{{mix.tabName}}</span>
    </div>
    <ion-grid>
      <ion-row>
        <ion-col col-6 *ngFor="let item of mix.data" (click)="toRoom(item)">
    <span class="room-online">
     <span class="eye"></span>
      {{item.online}}
    </span>
          <img [src]="item.room_src">
          <span class="room-nickname">
      <span class="user"></span>
      {{item.nickname}}
      </span>
          <div class="room-des">{{item.room_name}}</div>
        </ion-col>
      </ion-row>
    </ion-grid>
  </div>

</ion-content>
